<template>
	<view style="background-color: #eeeeee;">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			我的收藏
		</tn-nav-bar>
		<view class="collect-top" :style="'top:'+vuex_custom_bar_height+ 'px'">
			<view class="collect-tab">
				<tn-tabs :list="list" :isScroll="false" :current="current" name="tabName" @change="change">
				</tn-tabs>
			</view>
			<view class="search-box">
				<image src="../../static/search.png" class="search-icon" ></image>
				<input class="search-text" placeholder="搜索收藏的内容" v-model="name"></input>
			</view>
			<view class="search" @click="searchMore">搜索</view>
		</view>
		<view :style="{paddingTop: vuex_custom_bar_height +45+ 'px'}" class="search-conten">
			<block v-if="current == 0">
				<collect-list ref="contentList" :dataList="content" @refreshContent="refresh" 
					:swipeOptions="swipeOptions" ></collect-list>
			</block>
			<block v-else>
				<view class="add-collect" :style="'top:'+ (vuex_custom_bar_height + 45) + 'px'">
					<view class="favorites-box" style="background: #eeeeee;">
						<view class="favorites-name" @click="showEdit=true">
							<span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-add"></text>
							</span>
							新建收藏夹
						</view>
						<!-- <view class="collect-switch" @click="edit"> <span
								style="font-size: 34rpx;margin-right: 10rpx;"><text class="tn-icon-edit"></text></span>
							编辑</view> -->
					</view>
				</view>
				<view style="padding:80rpx 20rpx 20rpx 20rpx;" >
					<view style="border-radius: 20rpx;overflow: hidden;margin-bottom: 20rpx;" v-for="(item,index) in folderData" :key="index">
						<view class="favorites-box">
							<view class="favorites-name">
								<span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-folder"></text>
								</span>
								{{item.folderName}}
							</view>
							<view class="collect-switch" @click="moreCollect(item.folderId,item.folderName)">
								<!-- <span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-deploy-fill"></text></span>
								展开 -->
								{{item.contentCount}}个作品<text class="tn-icon-right"></text>
							</view>
						</view>
						<view class="collect-list-box">
							<collect-list ref="contentList" :dataList='item.contentsVOList' @refreshContent="refresh" :canSwipe="true"
								:swipeOptions="swipeOptions" :edit="isEdit"></collect-list>
						</view>
					</view>
					
				</view>
			</block>
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more>
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="list"
				v-if="content.length == 0"></tn-empty>
		</view>
		<tn-modal v-model="showEdit" :custom="true">
			<view class="custom-modal-content">
				<!-- <view class="tn-icon tn-icon-about-fill">修改文件夹名称</view> -->
				<view style="display: flex;align-items: center;">
					<view style="width: 250rpx;">新文件夹名：</view><input class="edit-name" v-model="collectName"></input></view>
				<view class="edit-submit" @click="nameEdit">保存</view>
			</view>
		</tn-modal>
	</view>
</template>

<script>
	import {
		getCollectByUser,
		getFolderContentByUser,
		saveCollectionFolders
	} from '@/util/index.js'
	export default {
		data() {
			return {
				title: '',
				page: 1,
				limit: 20,
				name:'',
				content: [],
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				swipeOptions: [{
					name: '取消收藏',
					action: 'del',
					style: {
						bgColor: '#FFA726',
						width: '150rpx'
					}
				}],
				type: 'collect',
				list: [{
					tabName: '作品'
				}, {
					tabName: '收藏夹'
				}],
				current: 0,
				isEdit: false,
				showEdit:false,
				folderData:[],
				collectName:''
			};
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.getFolderData()
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getList() {
				getCollectByUser({
					page: this.page,
					limit: this.limit,
					selectType: '1',
					title:this.name
				}).then((res) => {
					this.content = this.content.concat(res.list)
					if (this.content.length < res.total) {
						this.loadStatus = 'loading'
					} else {
						this.loadStatus = 'noMore'
					}
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			getFolderData(){
				getFolderContentByUser({
					page: 1,
					limit: 500,
					name:this.name
				}).then((res) => {
					this.folderData = res.list
				})
			},
			refresh() {
				this.page = 1
				this.content = []
				this.getList()
			},
			edit() {
				this.isEdit = !this.isEdit
			},
			nameEdit(){
				saveCollectionFolders({
					name:this.collectName
				}).then((res) => {
					this.getFolderData()
					this.showEdit=false
				})
			},
			moreCollect(id,name){
				uni.navigateTo({
					url:`../collect-management/collect-management?id=${id}&name=${name}`
				})
			},
			searchMore(){
				if(this.current == 0){
					this.page = 1
					this.content = []
					this.getList()
				}else{
					this.getFolderData()
				}
			}

		},
		//下拉刷新
		onPullDownRefresh() {
			if(this.current == 1 ){
				uni.stopPullDownRefresh();
				return
			}
			this.page = 1
			this.content = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if(this.current == 1 )return
			if (this.loadStatus == 'noMore') return
			this.page++;
			this.getList();
		},
	}
</script>

<style lang="less">
	.search-conten {
		min-height: 100vh;
	}

	.load-more {
		padding: 20rpx;
	}

	.collect-top {
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		background-color: #eeeeee;
		position: fixed;
		z-index: 9999;

		.collect-tab {
			width: 250rpx;
			margin-right: 20rpx;
		}

		.search-box {
			width: 550rpx;
			height: 68rpx;
			margin: auto;
			background-color: #FFFFFF !important;
			border-radius: 120rpx 120rpx 120rpx 120rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;

			.search-icon {
				width: 32rpx;
				height: 32rpx;
				flex: 0 0 32rpx;
				margin-right: 8rpx;
			}

			.search-text {
				color: #333333;
				flex: 1;
				text-align: left;
			}
		}

		.search {
			width: 100rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			color: #00C8C8;
		}
	}

	.favorites-box {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;

		.favorites-name {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}

		.collect-switch {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.collect-list-box {
		width: 100%;
		// padding:10rpx 20rpx;
		overflow: hidden;
		background-color: #eeeeee;
	}

	.add-collect {
		position: fixed;
		width: 100%;
		height: 80rpx;
		background-color: red;
		z-index: 10000;
	}
	.edit-name{
		width: 100%;
		border: 1rpx solid #E4E9EC;
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}
	.edit-submit{
		width: 100%;
		height: 60rpx;
		text-align: center;
		border-radius: 25rpx;
		line-height: 60rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		margin:20rpx auto 0;
	}
</style>
